<template>
             <view class="my-tab-box" >    
                        <view :class="[fixed?'my-tab my-tab-fixed':'my-tab']" >
                                <view class="parent">
                                        <view :class="idx==1?'item on':'item'" @tap="handleTab(1)">猜你喜欢</view>
                                        <view :class="idx==2?'item on':'item'" @tap="handleTab(2)">热卖商品</view>
                                        <view :class="idx==3?'item on':'item'" @tap="handleTab(3)">附近好店</view>
                                </view>
                               
                        <scroll-view scroll-x v-if="idx == 3">
                                <view class="child"> 
                                    
                                        <view 
                                         :class="[selectIdx == index?'item on':'item']"
                                         v-for="(item,index) in l" 
                                         @tap="selected(index)"
                                         :key="index">{{item.categoryName}}</view>
                                      
                                        
                                </view>           
                        </scroll-view>
                                
                        </view>
            </view>

</template>
<script lang="ts">

  import {Vue, Component ,Prop, Watch } from 'vue-property-decorator';

   @Component({}) 
   export default  class extends Vue {
        @Prop({type:Boolean,default:false})fixed!:boolean;
        @Prop({type:Number,default:88})height!:number;
        @Prop({type:Array,default:[]}) l!:Array<any>;
        @Prop({type:[String,Number],default:''}) defaultSelectId!:string|number;
       
        idx:number = 1;
        selectIdx:number = 0;

        selected(i:number){
            this.selectIdx = i;
            let id = this.l[i].id;
            this.$emit('setSelectId',id);
            console.log(this.l[i])
        }
        handleTab(i:number){
            this.idx = i;
            this.$emit('setTabIdx',i);
        }  

        // @Watch('defaultSelectId') onChangeValue(n:any,o:any){
        //         console.log(n,123123)
        // }
        
        
        
            
    }

    

</script>
<style lang="scss">
        .my{
                &-tab{
                    background: #fff;
                    border-radius: 20rpx ;

                    padding: 0 30rpx;
                    transition: all 0.3s ease 0s;
                    .parent{
                        display: flex;
                        .item{
                            font-size: 28rpx;
                            color:#000;
                            padding: 30rpx 0 15rpx;
                            margin-right: 80rpx;
                            position: relative;
                          
                        }
                        .on{
                            font-size: 32rpx;
                            &:after{
                                content:'';
                                position: absolute;
                                left:50%;
                                bottom:0rpx;
                                height: 6rpx;
                                width: 70rpx;
                                transform: translateX(-50%);
                                background: $my-main-color;
                            }
                        }
                    }
                    .child{
                         display: flex;
                         font-size: 24rpx;
                         color:#666;
                         font-weight:200;
                         padding: 20rpx 0;
                         border-top:1px solid $my-main-bg;
                        .item{
                            margin-right: 60rpx;
                            white-space: nowrap;
                        }
                        .on{
                            color:$my-main-color;
                            font-weight: normal;
                        }
                    }

                }
                &-tab-fixed{
                    position: fixed;
                    top:0;
                    right:0rpx;
                    left:0rpx;
                    background:#fff;
                    border-radius: 0;
                    z-index: 99;
                    
                }
                
        }

        .my-tab-box{
                    height: 172rpx;
                }
</style>